<template>
	<view class="feedback">
		<uni-mdlist :listData="itemArr" @clickItem="showPicker=true"></uni-mdlist>
		<view class="feedbackMain">
			<textarea class="font14 content" placeholder-class="font14 colorddd" v-model="content" maxlength="200" placeholder="建议或意见(200字符)" cols="30" rows="10"></textarea>
			<view class="font14">相关截图（选填,最多9张）</view>
			<view class="bold uploadCommon colorccc" @click="uploadFileClick">+</view>
			<uni-imgbox v-if="imgArr.length>0" :imgArr="imgArr"></uni-imgbox>
		</view>
		<view class="fixedBottomBtn" @click="submit">提交</view>
		<!-- 问题类型选择 -->
		<uni-singlepicker v-if="showPicker" :showPicker="showPicker" :pickerData="pickerData" @surePicker="surePicker" @cancel="cancelPicker"></uni-singlepicker>
	</view>
</template>

<script>
	import { chooseImg,uploadFile,previewImg} from "@/utils/common.js"
	import { feedback } from "@/api/mine.js"
	export default {
		data() {
			return {
				showPicker:false,
				itemArr:[{
					title:'问题类型',
					val:''
				}],
				pickerData:[{
					pickerTitle:'程序错误'
				},{
					pickerTitle:'产品建议'
				},{
					pickerTitle:'其他'
				}],
				imgArr:[],
				content:'',
			};
		},
		onLoad() {
			this.itemArr[0].val=this.pickerData[0].pickerTitle
		},
		methods:{
			clickItem(item){
				console.log('item',item)
			},
			uploadFileClick(){
				if(this.imgArr.length>=9){
					uni.showToast({
						title:'图片最多9张',
						icon:'none'
					})
					return
				}
				chooseImg(9).then((res)=>{
					res.forEach((item)=>{
						uploadFile([item]).then((successFile)=>{
							this.imgArr.push(successFile.url)
						})
					})
				})
			},
			//取消分区选择
			cancelPicker(){
				this.showPicker=false
			},
			// 选择分区的确定事件
			surePicker(item){
				console.log('item',item)
				this.itemArr[0].val=(item?item.pickerTitle:this.pickerData[0].pickerTitle)
				this.showPicker=false
			},
			// 提交
			submit(){
				if(!this.itemArr[0].val){
					uni.showToast({
						title:'请选择问题类型',
						icon:'none'
					})
					return
				}else if(!this.content){
					uni.showToast({
						title:'请填写建议或意见',
						icon:'none'
					})
					return
				}
				uni.showLoading({
					title:'提交中',
					mask:true
				})
				let param={
					type:this.itemArr[0].val,
					description:this.content,
					screenshot:this.imgArr.join(',')
				}
				feedback(param).then((res)=>{
					uni.hideLoading()
					if(res.code==100000){
						uni.showToast({
							title:'提交成功，感谢您的反馈！',
							icon:'none'
						})
						setTimeout(()=>{
							uni.navigateBack()
						},1200)
					}
				}).catch((err)=>{uni.hideLoading()})
			}
		}
	}
</script>
<style lang="scss">
page{
	background: $pageBgColor;
}
</style>
<style lang="scss" scoped>
.feedback{
	padding: 30rpx 30rpx 120rpx;
	box-sizing: border-box;
	::v-deep .listItem{
		border-bottom: none;
	}
	.feedbackMain{
		background: #fff;
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		margin: 20rpx 0 0;
		.content{
			border:1px solid $bordercolor;
			width: 100%;
			padding:20rpx;
			box-sizing: border-box;
			border-radius: 8rpx;
			margin:0 0 30rpx;
			background:$pageBgColor;
		}
		.uploadCommon{
			margin:20rpx 0;
		}
	}
	
}
</style>
